iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

Vue 與 Element UI 兩三事系列 第 20

Vue 與 Element UI 兩三事#20 第三週回顧

  • 分享至 

  • xImage
  •  

前言:
鐵人賽已經過去 2/3 了,各位繼續努力吧
正文:
在這週第一天,首先先介紹了 Vuex 來說明在多元件共用一個狀態時該如何去進行管理,並且提到了 vuex 是一種單一狀態樹的概念,所有內容將在 store 的 state 內進行管理,當要進行更改時根據更改為同步或不同步來選擇使用 mutation 或是 actions 來進行狀態更改,而當我們的內容越來越多時,可以透過 module 來將相似性值的內容切割成一份份 module 更方便管理

而到了第二天,開始進行 element-ui 的導入,並且提到了在 element-ui 中是如何進行布局的,相較於多數人熟悉的 bootstrap , element-ui 是將畫面切割成 24 等份,並且可以自己選擇是否使用 flex 布局

在第三天中,介紹到了 element-ui 中的布局容器和顏色,也提到了 scss 的 mix() 函式,可以提供兩種顏色的混色,讓顏色比較有規範

第四天,介紹到了 element-ui 的 icon 和 button ,在 element-ui 中特別的是其本身已經有提供許多 icon 可以使用,無須再額外引用其他資源

第五天,我們將焦點拉回 vue 中,介紹到了 vue 的生命週期,在 vue 中,每個元件的創建、更新和銷毀都有屬於他們的週期掛勾,可以讓我們在元件進行更動時額外進行操作

第六天,我們開始將內容帶到了輸入框中,首先先介紹到了文字輸入和密碼輸入框,後面再提到了在 element-ui 中 textarea 如何去設定自適應高度這件事情

在下禮拜,會盡速將 element-ui 的基本內容盡快介紹完畢,並且在鐵人賽的最後階段會實作含有登入登出功能和權限管理的頁面,如果還有時間會額外添加個人資訊管理,今天的回顧就到這裡吧。


上一篇
Vue 與 Element UI 兩三事#19 element-ui input(1)
下一篇
Vue 與 Element UI 兩三事#21 element-ui input(2)
系列文
Vue 與 Element UI 兩三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言